<template>
    <div class="login">
        <el-card class="box-card" style="max-width: 480px">
            <template #header>
                <div class="card-header">
                    <el-button key="用户登录" type="success" link @click="$router.push('/')">
                        用户登录
                    </el-button>
                </div>
            </template>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="loginForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="管理员账号" prop="account">
                    <el-input v-model="loginForm.account" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="管理员密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" show-password placeholder="请输入密码" />
                </el-form-item>
                <el-form-item class="form-item" prop="code">
                    <el-input class="input" v-model="loginForm.code" placeholder="请输入验证码" />
                    <canvas ref="verify" @click="handleDraw"  :width="state.width" :height="state.height"></canvas>
                </el-form-item>
                <el-form-item>
                    <el-button class="lookButton" type="primary" @click="login(loginForm)">
                        登录
                    </el-button>
                    
                </el-form-item>
            <el-form-item>
                <el-button type="info" round @click="reset()">重置</el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElNotification } from 'element-plus';
import { Login } from '../../api/login';
import { draw } from '../../utils/verificationCode.ts';
// 页面跳转
import { useRouter } from 'vue-router';
const router = useRouter();

const verify = ref(null)
const state = reactive({
    pool: 'abcdefghijkmnpqrstuvwxyz0123456789',
    // 声明两个变量存验证码的宽高
    width: 140,
    height: 30,
    // 验证码最终存储的位置
    imgCode: ''
})
// 初始化绘制图像验证码
onMounted(() => {
    state.imgCode = draw(verify, state)
    console.log(state.imgCode);
})
// 点击之后重新绘制图形验证码
const handleDraw = () => {
    state.imgCode = draw(verify, state)
    console.log(state.imgCode);
}

interface RuleForm {
    account: string;
    password: string;
    code: string;
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '账号或密码不能为空', trigger: 'blur' },
        // { min: 3, max: 6, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '账号或密码不能为空', trigger: 'blur' },
        // { min: 3, max: 6, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
})
// 登录信息
const loginForm = ref({
    account: '',
    password: '',
    code: ''
})
// 登录按钮
const login = async (loginForm: any) => {
    ruleFormRef.value?.validate((valid: any) => {
        if (valid) {
            console.log('submit!')
            if (loginForm.code == state.imgCode) {
                Login({account: loginForm.account,password: loginForm.password}).then((res: any) => {
                    if (res.code === 2000) {
                        console.log(res.message);
                        ElNotification({
                            title: '成功',
                            message: res.message,
                            type: 'success',
                        })
                        if(res.data.roleId == 1 || res.data.roleId == 2 || res.data.roleId == 3){
                            ElMessage.error('该账号不是管理员，只有管理员才能登录')

                        }
                        console.log(res.data);
                        sessionStorage.setItem("userId", res.data.id)
                        sessionStorage.setItem("userAvatarUrl", res.data.avatarUrl)
                        sessionStorage.setItem("userRoleId", res.data.roleId)
                        sessionStorage.setItem("userName", res.data.userName)
                        loginForm.value = { account: '', password: '', code: '' }
                        router.push('/users')
                    } else {
                        ElMessage.error(res.message)
                        state.imgCode = draw(verify, state)
                        loginForm.code = ''
                    }
                })
            } else {
                state.imgCode = draw(verify, state)
                loginForm.code = ''
                ElMessage.error('验证码输入错误')
                
            }

        } else {
            state.imgCode = draw(verify, state)
            loginForm.code = ''
            ElMessage.error("表单验证失败")
        }
    })
}
const reset = () => {
    loginForm.value = { account: '', password: '', code: '' }
}
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../../assets/image/adminLogin.png");
    background-size: 100% 100%;
}

.el-card {
    width: 500px;
    opacity: 1;
}

.form-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input {
    width: 295px;
}

.lookButton {
    width: 440px;
    background-color: #9bbde8;
    color: #fff;
    border: 1px solid #9bbde8;
}

.lookButton:hover {
    width: 440px;
    background-color: #fff;
    color: #50bbff;
    border: 1px solid #50bbff;
}

.lookButton:active {
    width: 440px;
    background-color: #fff;
    color: #50bbff;
    border: 1px solid #50bbff;
}
</style>